import React from 'react';
import { Space, Table, Tag, Button } from 'antd';
import eventBus from '@/utils/events'
import { delUserFn } from '@/api/user';
const Mytable = (props) => {
    const { userlist } = props
    // console.log('userlist111', userlist);
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            // render: (text) => <a>{text}</a>,
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
            key: 'mobile',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: '性别',
            key: 'gender',
            dataIndex: 'gender',
            render: (_, tags) => {
                // console.log('tags', tags); //  tags 参数就是当前这一列对应的每一条对象数据
                const { gender } = tags
                switch (gender) {
                    case '1':
                        return <Tag color={"red"} >{'男'}</Tag>
                        break;
                    case '2':
                        return <Tag color={"green"} >{'女'}</Tag>
                        break;
                    case '3':
                        return <Tag color={"blue"} >{'保密'}</Tag>
                        break;
                    default:
                        break;
                }
            },
        },
        {
            title: '状态',
            key: 'tags',
            dataIndex: 'tags',
            render: (_, { status }) => (
                status == '1' ? <Tag color={'green'} >{'正常'}</Tag> : <Tag color={'red'} >{'禁用'}</Tag>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button danger onClick={() => deluserFn(record)}>删除</Button>
                    <Button type='primary' onClick={() => editUserFn(record)}>编辑</Button>
                </Space>
            ),
        },
    ];
    // 数据
    const data = [
        {
            key: '1',
            name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park',
            tags: ['nice', 'developer'],
        },
        {
            key: '2',
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park',
            tags: ['loser'],
        },
        {
            key: '3',
            name: 'Joe Black',
            age: 32,
            address: 'Sydney No. 1 Lake Park',
            tags: ['cool', 'teacher'],
        },
    ];

    // 点击删除用户
    const deluserFn = (record) => {
        delUserFn(record).then(res => {
            // 
            console.log('res', res);
            if (res.data.errNo == 0) {
                // 删除成功
                // 重新获取数据
                props.getlist()
            }
        })
    }
    // 点击编辑用户
    const editUserFn = (record) => {
        // 显示模态框, 调用兄弟组件 Mymodal 中的方法
        console.log(eventBus);
        eventBus.emit('mybrotherFn', 'edit', record)

    }


    return (
        <>
            <Table pagination={false} columns={columns} dataSource={userlist} rowKey={(record) => String(record.id)} />
        </>
    );
}

export default Mytable;
